<template>
  <div>
    <div class="progress-wrap">
      <div class="progress-box" v-for="it in levelRateList" :key="it.levelName">
        <span>{{ it.levelName }}</span>

        <a-tooltip :title="`完成数:${it.integral || 0},达标数:${it.needIntegral || 0},下级别达标数${it.nextNeedIntegral || 0}`">
          
          <a-progress :percent="it.rate >= 1 ? 100 : it.rate * 100"    type="dashboard" />
          <!-- :success-percent="30" -->
        </a-tooltip>
      </div>
    </div>
    <div class="all-star-wrap">
      <ul class="level-wrap">
        <li>{{ userData.nonceLevel.name }}</li>
        <li v-if="userData.nextLevel.name">{{ userData.nextLevel.name }}</li>
      </ul>
      <div v-for="(it, index) in starList" :key="index" class="star-wrap-wrap">
        <span> {{ it.name }}</span>
        <ul class="star-wrap">


          <!-- "{"task": {"C类": {"A": 300, "B": 20, "C": 10}}, "score": {"A": {"1": 1, "3": 1}, "B": {"3": 1}, "C": {"2": 1}}, "integral": {"C类": {"rate": 0.78, "integral": 625.00, "nextRate": 0.48, "needIntegral": 800, "nextNeedIntegral": 1300}}, "scoreInfo": {
            "A": {"score_1": 50, "score_3": 50, "maxScore_1": 40, "maxScore_3": 30, "maxNextScore_1": 50, "maxNextScore_3": 35}, 
            "B": {"score_3": 100, "maxScore_3": 15, "maxNextScore_3": 25}, 
          "C": {"score_2": 100, "maxScore_2": 15, "maxNextScore_2": 25}}, "scoreCheck": false, "nextScoreCheck": false}" -->
          <li>
            1星:
            <span v-if="it.scoreInfo && (it.scoreInfo.score_1 || 0) > it.scoreInfo.maxScore_1" class="red">×</span>
            <span v-else class="green">√</span>
          </li>
          <li>
            2星: <span v-if="it.scoreInfo && (it.scoreInfo.score_2 || 0) > it.scoreInfo.maxScore_2" class="red">×</span
            ><span v-else class="green">√</span>
          </li>
          <li>
            3星: <span v-if="it.scoreInfo && (it.scoreInfo.score_3 || 0) > it.scoreInfo.maxScore_3" class="red">×</span
            ><span v-else class="green">√</span>
          </li>
          <li>
            4星: <span v-if="it.scoreInfo && (it.scoreInfo.score_4 || 0) > it.scoreInfo.maxScore_4" class="red">×</span
            ><span v-else class="green">√</span>
          </li>
        </ul>
        <ul class="star-wrap star-wrap-next" v-if="userData.nextLevel.name">
          <li>
            1星:
            <span v-if="it.scoreInfo && (it.scoreInfo.score_1 || 0) > (it.scoreInfo.maxNextScore_1 || 100)" class="red">×</span
            ><span v-else class="green">√</span>
          </li>
          <li>
            2星:
            <span v-if="it.scoreInfo && (it.scoreInfo.score_2 || 0) > (it.scoreInfo.maxNextScore_2 || 100)" class="red">×</span
            ><span v-else class="green">√</span>
          </li>
          <li>
            3星:
            <span v-if="it.scoreInfo && (it.scoreInfo.score_3 || 0) > (it.scoreInfo.maxNextScore_3 || 100)" class="red">×</span
            ><span v-else class="green">√</span>
          </li>
          <li>
            4星:
            <span v-if="it.scoreInfo && (it.scoreInfo.score_4 || 0) > (it.scoreInfo.maxNextScore_4 || 100)" class="red">×</span
            ><span v-else class="green">√</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },

  components: {},
  props: {
      userData: {
          type: Object,
          default: null
      },
      starList: {
          type: Array,
          default: null
      },
      levelRateList: {
          type: Array,
          default: null
      },
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {},
  destroyed() {},
}
</script>
<style lang='less' scoped>
.all-star-wrap {
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
  .level-wrap {
    width: 10%;
    text-align: center;
    margin-top: 21px;
    li {
      width: 100%;
      font-weight: bold;
      border: 1px solid #ccc;
      line-height: 42px;
      &:nth-child(2) {
        border-top: none;
      }
    }
  }
  .star-wrap-wrap {
    width: 30%;
    text-align: center;
    span {
      font-weight: bold;
    }
    .red {
      color: #ee6666;
    }
    .green {
      color: #91cc75;
    }
  }
}

// /deep/
// .ant-card{
//   background-color: #202948;
//   .ant-card-head{
//     border-bottom-color:transparent;
//   }
// }
.star-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  &:nth-child(3) {
    border-top: none;
  }
  li {
    width: 50%;
  }
  // &.star-wrap-next {
  //   padding-top: 10px;
  // }
}
.progress-wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .progress-box {
    position: relative;
    span {
      position: absolute;
      display: inline-block;
      top: 85%;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }
}
</style>